<template>
	<div class="songList-container">
		<div class="songList-content">
			<div class="songList-top">
				<div>
					<h2>{{nowCat}}</h2>
					<a @click="changeIsShowHideDiv">选择分类</a>
				</div>
				<div>
					<a @click="getAllCat">热门</a>
				</div>
				<div class="songList-hideDiv" v-if="isShowHideDiv">
					<i class="hideDiv-icon"></i>
					<div class="hideDiv-top">
						<div>
							<p @click="getAllCat">全部分类</p>
						</div>
					</div>
					<div class="hideDiv-bottom" @click="changeCat">
						<div v-for="categories,index in catList.categories" :key="index">
							<div>
								<i></i>
								<h3>{{categories}}</h3>
							</div>
							<div>
								<ul>
									<li v-for="cat in myCat[index]" :key="cat.name"><a>{{cat.name}}</a></li>
									<!-- <li><a>欧美</a></li>
									<li><a>日语</a></li>
									<li><a>韩语</a></li>
									<li><a>粤语</a></li> -->
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<SongView :songData="songData"></SongView>
			<div class="songList-bottom">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="total"
					:page-size="35"
					@current-change="currentChange"
				/>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "SongList",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import request from "../../../utils/request";
import SongView from "./SongView";

import { getCatList } from '@/api/SongList'

const songData = ref([]);
// 判读隐藏的div是否显示的flag
let isShowHideDiv = ref(false);
// 存放歌单分类列表的变量
const catList = ref({all: ''})
// 自己处理出来的映射分类数据
const myCat = ref({})
// 存储当前分类的变量
const nowCat = ref('全部')
// 分页器的数据条数
const total = ref(100)

onMounted(async () => {
  const catListResult = await request("/playlist/catlist");
  catList.value = catListResult
	// 对请求回来的列表数据进行分类方便接下来使用
	for(let i = 0; i < 5; i++){
		myCat.value[i] = catList.value.sub.filter((item) => {
			return item.category == i ? true : false
		})
	}
	// 默认请求全部
	getAllCat()
});

// 获取全部歌单列表
const getAllCat = async() => {
	const result = await getCatList(35);
	songData.value = result.playlists;
	nowCat.value = '全部'
}

const changeIsShowHideDiv = () => {
	isShowHideDiv.value = !isShowHideDiv.value;
};

const changeCat = async(event) => {
	// 判断事件源是否为a标签
	if(event.target.nodeName === 'A'){
		nowCat.value = event.target.innerText
		const dataLength = await getCatList(100,nowCat.value);
		const result = await getCatList(35,nowCat.value);
		total.value = result.total
		songData.value = result.playlists;
		isShowHideDiv.value = false
	}
}

// 分页器的当前页面发生改变的回调
const currentChange = async (current) => {
	// 因为接口没有做分页请求，所以只能发送请求返回数据对数据手动进行处理模拟分页请求，因改接口最大只能返回100条数据且一个分页写死35条数据所以最大只能请求3个分页
	const result = await getCatList(35*current,nowCat.value)
	// 对请求回来的数据进行遍历再赋值
	songData.value = result.playlists.filter((item, index) => {
		return index > 35 * (current - 1) - 1 && index <= 35 * current - 1
			? true
			: false;
	});
};

</script>

<style scoped>
.songList-container {
	width: 100%;
	background-color: #f5f5f5;
}
.songList-content {
	display: flex;
	flex-direction: column;
	width: 982px;
	padding: 40px;
	box-sizing: border-box;
	margin: 0 auto;
	background-color: white;
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
}
.songList-top {
	display: flex;
	position: relative;
	justify-content: space-between;
	height: 40px;
	width: 100%;
	border-bottom: 2px solid #c20c0c;
	vertical-align: top;
}
.songList-top > div:first-of-type {
	display: flex;
}
.songList-top > div > h2 {
	font-size: 24px;
	color: #333;
	font-weight: inherit;
}
.songList-top > div:first-of-type > a {
	display: inline-block;
	height: 29px;
	width: 80px;
	margin-left: 10px;
	line-height: 29px;
	text-align: center;
	background-color: rgb(251, 251, 251);
	border: 1px solid rgb(136, 136, 136);
	border-radius: 5px;
	color: rgb(0, 122, 149);
	cursor: pointer;
}
.songList-top > div:nth-of-type(2) > a {
	display: inline-block;
	height: 29px;
	width: 46px;
	line-height: 29px;
	text-align: center;
	color: white;
	background: url(https://s2.music.126.net/style/web2/img/button.png?a165893ba7d2018f2cba3a81a983ca39)
		no-repeat 0 9999px;
	background-position: 0 0;
  cursor: pointer;
}
.songList-hideDiv {
	position: absolute;
	top: 45px;
	left: -35px;
	width: 700px;
	height: 425px;
	border-radius: 5px;
	border: 1px solid rgb(156, 156, 156);
	background-color: white;
	z-index: 2;
}
.hideDiv-icon {
	position: absolute;
	top: -11px;
	left: 120px;
	width: 24px;
	height: 11px;
	background: url(https://s2.music.126.net/style/web2/img/iconall.png?c97b7a43331a9b1ec963ee249fd4ee01)
		no-repeat;
	background-position: -48px 0;
}
.hideDiv-top {
	width: 100%;
	height: 12%;
	border-bottom: 1px solid rgb(223, 223, 223);
}
.hideDiv-top > div {
	width: 75px;
	height: 26px;
	transform: translate(24px, 16px);
	text-align: center;
	line-height: 26px;
	background: url(https://s2.music.126.net/style/web2/img/button.png?a165893ba7d2018f2cba3a81a983ca39)
		no-repeat 0 9999px;
	background-position: 0 -64px;
	cursor: pointer;
}
.hideDiv-bottom {
	height: 88%;
}
.hideDiv-bottom > div {
	display: flex;
}
.hideDiv-bottom > div > div:first-of-type {
	width: 14%;
	height: 27px;
	padding-top: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.hideDiv-bottom > div > div:first-of-type > h3 {
	margin-left: 6px;
}
.hideDiv-bottom > div > div:first-of-type > i {
	display: inline-block;
	width: 23px;
	height: 23px;
	background: url(https://s2.music.126.net/style/web2/img/icon.png?6ef008eaa455074f27505b3467e56f6b)
		no-repeat 0 9999px;
}
.hideDiv-bottom > div:nth-of-type(1) > div:first-of-type > i {
	background-position: -20px -735px;
}
.hideDiv-bottom > div:nth-of-type(2) > div:first-of-type > i {
	background-position: 0 -60px;
}
.hideDiv-bottom > div:nth-of-type(3) > div:first-of-type > i {
	background-position: 0 -88px;
}
.hideDiv-bottom > div:nth-of-type(4) > div:first-of-type > i {
	background-position: 0 -117px;
}
.hideDiv-bottom > div:nth-of-type(5) > div:first-of-type > i {
	background-position: 0 -141px;
}
.hideDiv-bottom > div > div:last-of-type {
	width: 86%;
	border-left: 1px solid #d8d8d8;
}
.hideDiv-bottom > div:last-of-type > div:last-of-type {
	color: #c20c0c;
	padding-bottom: 35px;
}
.hideDiv-bottom > div > div:last-of-type > ul {
	display: flex;
	flex-wrap: wrap;
	padding-top: 16px;
}
.hideDiv-bottom > div > div:last-of-type > ul > li {
	padding: 0 13px;
	margin: 5px 0;
	border-right: 1px solid #d8d8d8;
}
.hideDiv-bottom > div > div:last-of-type > ul > li > a {
	cursor: pointer;
}
.songList-bottom {
	display: flex;
	justify-content: center;
}
</style>
